in English

Enkonduko

Komencu kun Bootstrap, la plej populara kadro de la mondo por konstrui respondemajn, unue moveblajn retejojn, kun jsDelivr kaj ŝablona startpaĝo.

Sur ĉi tiu paĝo

Rapida komenco

Ĉu vi volas rapide aldoni Bootstrap al via projekto? Uzu jsDelivr, senpagan malfermfontan CDN. Ĉu vi uzas pakaĵadministrilon aŭ bezonas elŝuti la fontdosierojn? Iru al la paĝo pri elŝutoj .

CSS

Kopiu-algluu la stilfolion <link>en vian <head>antaŭ ĉiuj aliaj stilfolioj por ŝargi nian CSS.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Multaj el niaj komponantoj postulas la uzon de JavaScript por funkcii. Specife, ili postulas niajn proprajn JavaScript-kromaĵojn kaj Popper . Metu unu el la sekvaj apud <script>la fino de viaj paĝoj, tuj antaŭ la ferma </body>etikedo, por ebligi ilin.

Pakaĵo

Inkluzivi ĉiun Bootstrap JavaScript kromaĵo kaj dependeco kun unu el niaj du pakaĵoj. Ambaŭ bootstrap.bundle.jskaj bootstrap.bundle.min.jsinkluzivas Popper por niaj konsiletoj kaj popovers. Por pliaj informoj pri kio estas inkluzivita en Bootstrap, bonvolu vidi nian enhavsekcion .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Apartigi

Se vi decidas iri kun la aparta skripto-solvo, Popper devas veni unue (se vi uzas konsiletojn aŭ popovers), kaj poste niajn JavaScript-kromaĵojn.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Moduloj

Se vi uzas <script type="module">, bonvolu raporti al nia uzado de Bootstrap kiel modula sekcio.

Komponentoj

Ĉu vi scivolas, kiuj komponantoj eksplicite postulas nian JavaScript kaj Popper? Alklaku la ligilon de montri komponantojn sube. Se vi tute ne certas pri la ĝenerala paĝa strukturo, daŭre legu por ekzempla paĝa ŝablono.

Montru komponantojn postulantajn JavaScript

Atentigoj por forigo
Butonoj por ŝanĝi ŝtatojn kaj markobutono/radia funkcio
Karuselo por ĉiuj glitkondutoj, kontroloj kaj indikiloj
Kolapso por ŝanĝi videblecon de enhavo
Dropdowns por montrado kaj poziciigado (ankaŭ postulas Popper )
Modaloj por montrado, poziciigado kaj rula konduto
Navbar por etendi nian Kolapsan kromaĵon por efektivigi respondeman konduton
Eksterkanvasoj por montrado, poziciigado kaj rula konduto
Tostoj por montri kaj forĵeti
Konsiletoj kaj popovers por montri kaj poziciigi (ankaŭ postulas Popper )
Scrollspy por rula konduto kaj navigado ĝisdatigoj

Komenca ŝablono

Nepre agordu viajn paĝojn kun la plej novaj normoj pri dezajno kaj disvolviĝo. Tio signifas uzi HTML5-doktipon kaj inkluzivi vidfendan meta-etikedon por taŭgaj respondemaj kondutoj. Kunigu ĉion kaj viaj paĝoj devus aspekti jene:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Por sekvaj paŝoj, vizitu la Dokumentojn pri Aranĝo aŭ niajn oficialajn ekzemplojn por komenci aranĝi la enhavon kaj komponantojn de via retejo.

Gravaj tutmondaj

Bootstrap uzas kelkajn gravajn tutmondajn stilojn kaj agordojn, pri kiuj vi devos konscii kiam vi uzas ĝin, ĉiuj el kiuj preskaŭ ekskluzive estas direktitaj al la normaligo de krucretumiloj. Ni plonĝu.

HTML5-dokumentotipo

Bootstrap postulas la uzon de la HTML5-dokumentotipo. Sen ĝi, vi vidos iom funky nekompleta stilo, sed inkluzivi ĝin ne devus kaŭzi iujn konsiderindajn singultojn.

<!doctype html>
<html lang="en">
  ...
</html>

Respondema meta-etikedo

Bootstrap estas disvolvita unue por poŝtelefono , strategio en kiu ni unue optimumigas kodon por porteblaj aparatoj kaj poste pligrandigas komponantojn laŭbezone per CSS-adresaj demandoj. Por certigi taŭgan bildigon kaj tuŝan zomon por ĉiuj aparatoj, aldonu la respondeman vidfendan meta-etikedon al via <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Vi povas vidi ekzemplon de tio en ago en la komenca ŝablono .

Skatolo-grandeco

Por pli simpla grandeco en CSS, ni ŝanĝas la tutmondan box-sizingvaloron de content-boxal border-box. Ĉi tio certigas paddingne influas la finan komputitan larĝon de elemento, sed ĝi povas kaŭzi problemojn kun iu triaparta programaro kiel Google Maps kaj Google Custom Search Engine.

En la malofta okazo, kiam vi devas anstataŭi ĝin, uzu ion kiel la jenon:

.selector-for-some-widget {
  box-sizing: content-box;
}

Kun la ĉi-supra fragmento, nestitaj elementoj—inkluzive de generita enhavo per ::beforekaj ::after— ĉiuj heredos la specifitan box-sizingpor tio .selector-for-some-widget.

Lernu pli pri kestomodelo kaj grandeco ĉe CSS-Trukoj .

Rekomencu

Por plibonigita transretumila bildigo, ni uzas Reboot por korekti nekonsekvencojn inter retumiloj kaj aparatoj dum li provizas iomete pli opiniajn rekomencojn al oftaj HTML-elementoj.

Komunumo

Restu ĝisdatigita pri la disvolviĝo de Bootstrap kaj kontaktu la komunumon per ĉi tiuj helpemaj rimedoj.

Legu kaj abonu al La Oficiala Bootstrap Blogo .
Babilu kun kunuloj Bootstrappers en IRC. Sur la irc.libera.chatservilo, en la #bootstrapkanalo.
Efektiviga helpo troveblas ĉe Stack Overflow (etikedita bootstrap-5).
Programistoj devas uzi la ŝlosilvorton bootstrapen pakaĵoj, kiuj modifas aŭ aldonas al la funkcieco de Bootstrap dum distribuado per npm aŭ similaj liveraj mekanismoj por maksimuma malkovro.

Vi ankaŭ povas sekvi @getbootstrap en Twitter por la plej novaj klaĉoj kaj mirindaj muzikfilmetoj.